/*------------------------------------------------------------------
[Table of contents] 
# overwrite some style of styles



-------------------------------------------------------------------*/
@import "~vuetify/src/styles/main";
@import "~vuetify/src/styles/styles";
/*------------------------------------------------------------------
[General Reset]
*/
//@import '~vuetify/src/styles/generic/_reset';

/*------------------------------------------------------------------
[General Bootstrap]
  Include theme variables, mixins, colors
*/  
//@import '~vuetify/src/styles/bootstrap';

/*------------------------------------------------------------------
[Generic Animations]
*/    
//@import '~vuetify/src/styles/generic/_animations';
/*------------------------------------------------------------------
[Generic Colors]
*/    
//@import '~vuetify/src/styles/generic/_colors';

/*------------------------------------------------------------------
[Generic Elevations]
*/      
//@import '~vuetify/src/styles/generic/_elevations';

/*------------------------------------------------------------------
[Generic Transitions]
*/      
//@import '~vuetify/src/styles/generic/_transitions';

/*------------------------------------------------------------------
[Common Html Elements]
*/    
//@import '~vuetify/src/styles/elements/_global';
//@import '~vuetify/src/styles/elements/_blockquote';
//@import '~vuetify/src/styles/elements/_code';
//@import '~vuetify/src/styles/elements/_headings';
//@import '~vuetify/src/styles/elements/_lists';
//@import '~vuetify/src/styles/elements/_typography';

/*------------------------------------------------------------------
[Common Styling helpers]
*/    
//@import '~vuetify/src/styles/trumps/_display';
//@import '~vuetify/src/styles/trumps/_spacing';
//@import '~vuetify/src/styles/trumps/_text';
//@import '~vuetify/src/styles/trumps/_helpers';

 
/*------------------------------------------------------------------
[Components Alert]
*/
//@import '~vuetify/src/styles/components/_alerts'

/*------------------------------------------------------------------
[Components App]
*/
//@import '~vuetify/src/styles/components/_app'

/*------------------------------------------------------------------
[Components AutoComplete]
*/
//@import '~vuetify/src/styles/components/_autocompletes'

/*------------------------------------------------------------------
[Components Avatar]
*/
//@import '~vuetify/src/styles/components/_avatars'

/*------------------------------------------------------------------
[Components Badge]
*/
//@import '~vuetify/src/styles/components/_badges'

/*------------------------------------------------------------------
[Components Bottom Nav]
*/
//@import '~vuetify/src/styles/components/_bottom-navs'

/*------------------------------------------------------------------
[Components Bottom Sheet]
*/
//@import '~vuetify/src/styles/components/_bottom-sheets'

/*------------------------------------------------------------------
[Components Breadcrumb]
*/
//@import '~vuetify/src/styles/components/_breadcrumbs'

/*------------------------------------------------------------------
[Components Toggle Buttom]
*/
//@import '~vuetify/src/styles/components/_button-toggle'

/*------------------------------------------------------------------
[Components Button]
*/
//@import '~vuetify/src/styles/components/_buttons'

/*------------------------------------------------------------------
[Components Card]
*/
//@import '~vuetify/src/styles/components/_cards'

/*------------------------------------------------------------------
[Components Carousel]
*/
//@import '~vuetify/src/styles/components/_carousel'

/*------------------------------------------------------------------
[Components Chip]
*/
//@import '~vuetify/src/styles/components/_chips'

/*------------------------------------------------------------------
[Components Content]
*/
//@import '~vuetify/src/styles/components/_content'

/*------------------------------------------------------------------
[Components Counter]
*/
//@import '~vuetify/src/styles/components/_counters'

/*------------------------------------------------------------------
[Components Data Iterator]
*/
//@import '~vuetify/src/styles/components/_data-iterator'

/*------------------------------------------------------------------
[Components Data Table]
*/
//@import '~vuetify/src/styles/components/_data-table'

/*------------------------------------------------------------------
[Components Date Picker]
*/
//@import '~vuetify/src/styles/components/_date-picker-header'
//@import '~vuetify/src/styles/components/_date-picker-table'
//@import '~vuetify/src/styles/components/_date-picker-title'
//@import '~vuetify/src/styles/components/_date-picker-years'

/*------------------------------------------------------------------
[Components Dialog]
*/  
//@import '~vuetify/src/styles/components/_dialogs'

/*------------------------------------------------------------------
[Components Divider]
*/
//@import '~vuetify/src/styles/components/_dividers'

/*------------------------------------------------------------------
[Components Expansion Panel]
*/
//@import '~vuetify/src/styles/components/_expansion-panel'

/*------------------------------------------------------------------
[Components Footer]
*/
//@import '~vuetify/src/styles/components/_footer'

/*------------------------------------------------------------------
[Components Form]
*/
//@import '~vuetify/src/styles/components/_forms'

/*------------------------------------------------------------------
[Components Grid]
*/
//@import '~vuetify/src/styles/components/_grid'

/*------------------------------------------------------------------
[Components Icon]
*/
//@import '~vuetify/src/styles/components/_icons'

/*------------------------------------------------------------------
[Components Input]
*/
//@import '~vuetify/src/styles/components/_inputs'

/*------------------------------------------------------------------
[Components Jumbotrons]
*/
//@import '~vuetify/src/styles/components/_jumbotrons'

/*------------------------------------------------------------------
[Components Label]
*/
//@import '~vuetify/src/styles/components/_labels'

/*------------------------------------------------------------------
[Components List]
*/
//@import '~vuetify/src/styles/components/_lists'
.v-list
  .v-list__tile--link:hover,
  .v-list__tile--highlighted,
  .v-list__group__header:hover
  .v-list__group--active:before,
  .v-list__group--active:after{
    background: #f5f5f5!important
}
/*------------------------------------------------------------------
[Components Menu]
*/
//@import '~vuetify/src/styles/components/_menus'

/*------------------------------------------------------------------
[Components Message]
*/
//@import '~vuetify/src/styles/components/_messages'

/*------------------------------------------------------------------
[Components Navigation Drawer]
*/
//@import '~vuetify/src/styles/components/_navigation-drawer'

/*------------------------------------------------------------------
[Components Overflow Button]
*/
//@import '~vuetify/src/styles/components/_overflow-buttons'

/*------------------------------------------------------------------
[Components Overlay]
*/
//@import '~vuetify/src/styles/components/_overlay'

/*------------------------------------------------------------------
[Components Pagination]
*/
//@import '~vuetify/src/styles/components/_pagination'

/*------------------------------------------------------------------
[Components Parallax]
*/
//@import '~vuetify/src/styles/components/_parallax'

/*------------------------------------------------------------------
[Components Picker]
*/
//@import '~vuetify/src/styles/components/_pickers'

/*------------------------------------------------------------------
[Components Progress]
*/
//@import '~vuetify/src/styles/components/_progress-circular'
//@import '~vuetify/src/styles/components/_progress-linear'

/*------------------------------------------------------------------
[Components Radio]
*/
//@import '~vuetify/src/styles/components/_radio-group'
//@import '~vuetify/src/styles/components/_radios'

/*------------------------------------------------------------------
[Components Range Slider]
*/
//@import '~vuetify/src/styles/components/_range-sliders'

/*------------------------------------------------------------------
[Components Ripple]
*/
//@import '~vuetify/src/styles/components/_ripples'

/*------------------------------------------------------------------
[Components Select]
*/
//@import '~vuetify/src/styles/components/_select'
//@import '~vuetify/src/styles/components/_selection-controls'

/*------------------------------------------------------------------
[Components Slider]
*/
//@import '~vuetify/src/styles/components/_sliders'
/*------------------------------------------------------------------
[Components Small Dialog]
*/
//@import '~vuetify/src/styles/components/_small-dialog'

/*------------------------------------------------------------------
[Components Snackbar]
*/
//@import '~vuetify/src/styles/components/_snackbars'

/*------------------------------------------------------------------
[Components Speed Dial]
*/
//@import '~vuetify/src/styles/components/_speed-dial'

/*------------------------------------------------------------------
[Components Stepper]
*/
//@import '~vuetify/src/styles/components/_steppers'

/*------------------------------------------------------------------
[Components Subheader]
*/
//@import '~vuetify/src/styles/components/_subheaders'

/*------------------------------------------------------------------
[Components Switch]
*/
//@import '~vuetify/src/styles/components/_switch'

/*------------------------------------------------------------------
[Components System Bar]
*/
//@import '~vuetify/src/styles/components/_system-bars'

/*------------------------------------------------------------------
[Components Table]
*/
//@import '~vuetify/src/styles/components/_tables'

/*------------------------------------------------------------------
[Components Tab]
*/
//@import '~vuetify/src/styles/components/_tabs'

/*------------------------------------------------------------------
[Components Text Field]
*/
//@import '~vuetify/src/styles/components/_text-fields'

/*------------------------------------------------------------------
[Components Text Area]
*/
//@import '~vuetify/src/styles/components/_textarea'

/*------------------------------------------------------------------
[Components Time Picker]
*/
//@import '~vuetify/src/styles/components/_time-picker-clock'
//@import '~vuetify/src/styles/components/_time-picker-title'

/*------------------------------------------------------------------
[Components Toolbar]
*/
//@import '~vuetify/src/styles/components/_toolbar'
/*------------------------------------------------------------------
[Components Tooltip]
*/
//@import '~vuetify/src/styles/components/_tooltips'


/*------------------------------------------------------------------
[FontAwesome]
*/

/*------------------------------------------------------------------
[Global]
*/
body {

  font-family: $body-font-family;
  font-size: $font-size-root;
  font-weight: map-get($font-weights,regular);
  line-height: $line-height-root;
}
h1 {
  font-size: 48px;
  font-weight: map-get($font-weights,thin);
  letter-spacing: -1.5;
}

h2 {

  font-size: 36px;
  font-weight: map-get($font-weights,light);
  letter-spacing: -0.5

}
h3 {

  font-size: 24px;
  font-weight: map-get($font-weights,light);
  letter-spacing: normal;
}

h4  {

  font-size: 20px;
  font-weight: map-get( $font-weights,light);
  letter-spacing: normal;
}
h5  {

  font-size: 16px;
  font-weight: map-get($font-weights,regular);
  letter-spacing: normal;
}
/*------------------------------------------------------------------
[4. Components / Card]
*/  
.v-card {

  // box-shadow: 0 1px 3px 1px rgba(0,0,0,0.03)
  box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);
  &__actions 
    .v-btn {

      margin: 0 8px;
      min-width: 56px;
      &:first-child{
        margin-left: 0
      }
  }

}
/*------------------------------------------------------------------
[Components / Timeline]
*/    

.timeline{

  position: relative;
  list-style: none;
  padding-left: 0;
  z-index: 1;

  &-block {
    display: -webkit-box;
    display: flex
  }

  &-detail {

    -webkit-box-flex: 1;
    flex: 1 1 0%;
    padding-bottom: 30px;
    @media
    (map-get($display-breakpoints,sm-and-down)){
      display: none;
    }

  }
  &-point {

    position: relative;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    flex-grow: 0;
    -webkit-box-ordinal-group: 3;
    order: 2;
    width: 96px;
    padding-bottom: 30px;
    text-align: center

  }
  &-point::before{

    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    bottom: -9px;
    width: 1px;
    margin-left: -1px;
    z-index: -1;
    background-color: #ebebeb;
   & &-block:last-child &-point::before{

    bottom: 0 !important;
   }

  & &-block:first-child &-point::after{

    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%

  }
  & &-block:last-child &-point::after{

    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%

  }
  }
  &-content {

    -webkit-box-flex: 1;
    flex: 1 1 0%;
    margin-bottom: 60px
  }

  &-period{

    position: relative;
    padding: 30px 0;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
  }

  &-period::after{

    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #ebebeb;
    border-radius: 50%;

  & &-period:first-child::after{

    display: none;
  }

  }
  &-point-xs &-point{

    width: 32px
  }
  &-point-sm &-point{

    width: 64px
  }
  &-point-lg &-point{

    width: 128px
  }
  &-point-xl &-point{

    width: 256px

  }
  @media

  (map-get($display-breakpoints,md-and-down)){

    & &-block &-detail {

      -webkit-box-ordinal-group:2;
      order: 1;
    }
    & &-block &-content {

      -webkit-box-ordinal-group: 4;
      order: 3
    }

                             }
  @media
  (map-get($display-breakpoints,md-and-up)){

      & &-block:nth-child(even) &-detail {

        -webkit-box-ordinal-group:2;
        order: 1;
        text-align: right
      }

      & &-block:nth-child(even) &-content {

        -webkit-box-ordinal-group: 4;
        order: 3

      }
      & &-block:nth-child(odd) &-detail {

        -webkit-box-ordinal-group: 4;
        order: 3;
        text-align: left
      }

      & &-block:nth-child(odd) &-content{

        -webkit-box-ordinal-group: 2;
        order: 1
      }
    & &-content-left &-block &-detail{

    -webkit-box-ordinal-group: 4;
    order: 3;
    text-align: left

    }
                             }
  & &-content-left &-block &-content{

    -webkit-box-ordinal-group: 2;
    order: 1;
  }

  & &-content-right &-block &-detail{

    -webkit-box-ordinal-group: 2;
    order: 1;
  }

  & &-content-right &-block &-content{

    -webkit-box-ordinal-group: 4;
    order: 3 ;
  }
  & &-activity &-content{

    margin-bottom: 10px
  }
}
/*------------------------------------------------------------------
[Components / Chat]
*/
.chat {

  &-history{

    &--toolbar{
      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.03)
    }
    &--list{

      a.list__tile--active{

        background: #eee
      }
    }
    &--scrollbar{

      height:calc(100vh - 48px);
      @media
      (map-get($display-breakpoints,sm-and-down)){
        height:calc(100vh - 48px - 56px)
      }
    }
  }
  &-room{

    &--toolbar{

      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.03)
    }
    &--scrollbar{

      height: calc(100vh - 48px - 80px)
    }
  }
}
/*------------------------------------------------------------------
[Components / mail]
*/
.mail{
  &-toolbar{
    border-bottom: 1px solid rgba(0,0,0,0.12)
  }
  &-list{

    &--layout{

      padding-top: 64px!important;
      @media
      (map-get($display-breakpoints,sm-and-down)){
        padding-top: 56px!important
      }

    }
    &--toolbar{

      margin-top: 64px!important;
      @media

      ( map-get($display-breakpoints,sm-and-down) ){
        margin-top: 56px!important
    }

      .check-all{

        flex: 0 0;
        margin-top: 0
      }
    }
    &--wrap{

      height: calc(100vh - 64px - 64px)
    }
  }
  &-reply{

    &--layout{
      padding-top: 64px!important;
      @media
      (map-get($display-breakpoints,sm-and-down)){
        padding-top: 56px!important
      }
    }
    &--toolbar{

      margin-top: 64px !important;
      @media
      (map-get($display-breakpoints,sm-and-down)){

        margin-top: 56px!important
      }

    }
    &--scrollbar{

      height: calc(100vh - 64px - 64px);
      @media
      (map-get( $display-breakpoints,sm-and-down)){

        height : calc(100vh - 56px - 56px)
      }

    }
  }
}
